<%-- 
    Document   : userroles
    Created on : Apr 5, 2013, 9:22:26 AM
    Author     : mona.chandrapal
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>User Roles</title>

        <!--  JQuery  -->
        <script type="text/javascript" src="../jquery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../jquery/jquery-ui-1.8.20.custom.min.js"></script>
        <!-- <link type="text/css" href="../jquery/redmond/jquery-ui-1.8.20.custom.css" rel="stylesheet" /> -->
        <link type="text/css" href="../jquery/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
        <link type="text/css" href="../jquery/smoothness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" />

        <!--  JQGrid Table -->
        <script type="text/javascript" language="javascript" src="../jqgrid/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" language="javascript" src="../jqgrid/js/jquery.jqGrid.min.js"></script>
        <link type="text/css" href="../jqgrid/css/ui.jqgrid.css" rel="stylesheet" />

        <!-- Bootstrap -->
        <link href="../twbootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="../twbootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <script src="../twbootstrap/js/bootstrap.min.js"></script>
        <script src="../twbootstrap/js/bootstrap-dropdown.js"></script>



        <script type="text/javascript" charset="utf-8">
              
            $(document).ready(function() {
              
                $("#search").click( function() {
                    
                    var searchfield = jQuery("#corpusername").val();
                    $("#usertable").jqGrid('setGridParam',{url:"../GetUserRoles?searchfield="+searchfield,page:1}).trigger("reloadGrid");
                });
             
                
                $("#usertable")
                .jqGrid(
                {
                    url : '../GetUserRoles',
                    datatype : 'json',
                    mtype : 'post',
                    colNames : [ 'User Name', 'userrole', 'Role Type'],
                    colModel : [
                      
                        {
                            name : 'username',
                            index : 'username',
                            width : 80,
                            align : 'left',
                            sortable : true,
                            resizable : true,
                            cellattr: function (rowId, tv, rawObject, cm, rdata) { 
                                return 'style="white-space: normal;"';
                            }
                        },
                        {
                            name : 'userrole',
                            index : 'userrole',
                            width : 80,
                            hidden: true,
                            align : 'left',
                            sortable : true,
                            resizable : true,
                            cellattr: function (rowId, tv, rawObject, cm, rdata) { 
                                return 'style="white-space: normal;"';
                            }
                        }, 
                        {
                            
                            name : 'roletype',
                            index : 'roletype',
                            width : 80,
                            align : 'left',
                            sortable : true,
                            resizable : true,
                            cellattr: function (rowId, tv, rawObject, cm, rdata) { 
                                return 'style="white-space: normal;"'; },
                            editable: true,
                            edittype:"select",
                            editoptions:{value:"0:User;1:SuperUser;2:Admin"}
                             
                        }
                    ],
                    pager : $('#pager'),
                    altRows : false,
                    width : $(window).width() - 500,
                    height: $(window).height() - 300,
                    rowNum : 10,
                    rowList : [ 10, 20, 30 ],
                    viewrecords : true,
                    caption: "Users",
                    rownumbers: true,
                    multiselect : false,
                    multiboxonly : false,
                    loadui : "enable",
                    loadtext : "Loading users ...",
                    recordtext : "Viewing {0} - {1} of {2}",
                    emptyrecords : "Check connectivity to Database!",
                    editurl: "../saverole",
                    

                    onSelectRow : function(id) {
                                     
                    },
                    ondblClickRow : function(id) {
                    }
                });
                
                $("#usertable").jqGrid('navGrid',"#pager",{edit:false,add:false,del:false,search:false});
                $("#usertable").jqGrid('inlineNav',"#pager",{edit:true,add:false,del:false,search:false});
                       
            
            });
            
           
            
        </script>

    </head>
    <body >


	<%@include file="toppanel.jsp"%>


        <h3 style="text-align: center">User Roles</h3>

        <div style="margin-left: 200px">
            UserName: &nbsp;&nbsp;<input id="corpusername" type="text" name="corpusername" value="" size="15" style="margin-top: 10px" /> &nbsp; 
            <input id="search" type="BUTTON"  class="btn" value="Search" name="search" />
        </div>
        <br/>
        <div style="margin-left: 200px">
            <table id="usertable" style="text-indent: 5px"></table>
            <div id="pager"></div>
        </div>
        <br/>
        <br/>


    </body>
</html>
